<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <link rel="icon" href="<%= BASE_URL %>favicon.ico">
  <!-- 使用CDN的CSS文件 -->
  <% for (var i in htmlWebpackPlugin.options.cdn &&
  htmlWebpackPlugin.options.cdn.css) { %>
  <link
          href="<%= htmlWebpackPlugin.options.cdn.css[i] %>"
          rel="stylesheet"
  />
  <% } %>
  <!-- 使用CDN的CSS文件 -->
  <title>Hcode OnlineJudge</title>
  <script>
    // IE 10 and earlier
    if (window.navigator.userAgent.indexOf('MSIE ') > 0 &&
      window.confirm('Your browser is not supported, click \'OK\' to update')) {
      window.location = 'http://outdatedbrowser.com'
    }
  </script>
  <style>
    @-webkit-keyframes enter {
      0% {
        opacity: 0;
        top: -10px;
      }

      5% {
        opacity: 1;
        top: 0px;
      }

      50.9% {
        opacity: 1;
        top: 0px;
      }

      55.9% {
        opacity: 0;
        top: 10px;
      }
    }

    @keyframes enter {
      0% {
        opacity: 0;
        top: -10px;
      }

      5% {
        opacity: 1;
        top: 0px;
      }

      50.9% {
        opacity: 1;
        top: 0px;
      }

      55.9% {
        opacity: 0;
        top: 10px;
      }
    }

    @-moz-keyframes enter {
      0% {
        opacity: 0;
        top: -10px;
      }

      5% {
        opacity: 1;
        top: 0px;
      }

      50.9% {
        opacity: 1;
        top: 0px;
      }

      55.9% {
        opacity: 0;
        top: 10px;
      }
    }

    body {
      background: #f8f8f9;
    }

    #app-loader {
      position: absolute;
      left: 50%;
      top: 50%;
      margin-left: -27.5px;
      margin-top: -27.5px;
    }

    #app-loader .square {
      background: #2d8cf0;
      width: 15px;
      height: 15px;
      float: left;
      top: -10px;
      margin-right: 5px;
      margin-top: 5px;
      position: relative;
      opacity: 0;
      -webkit-animation: enter 6s infinite;
      animation: enter 6s infinite;
    }

    #app-loader .enter {
      top: 0px;
      opacity: 1;
    }

    #app-loader .square:nth-child(1) {
      -webkit-animation-delay: 1.8s;
      -moz-animation-delay: 1.8s;
      animation-delay: 1.8s;
    }

    #app-loader .square:nth-child(2) {
      -webkit-animation-delay: 2.1s;
      -moz-animation-delay: 2.1s;
      animation-delay: 2.1s;
    }

    #app-loader .square:nth-child(3) {
      -webkit-animation-delay: 2.4s;
      -moz-animation-delay: 2.4s;
      animation-delay: 2.4s;
      background: #ff9900;
    }

    #app-loader .square:nth-child(4) {
      -webkit-animation-delay: 0.9s;
      -moz-animation-delay: 0.9s;
      animation-delay: 0.9s;
    }

    #app-loader .square:nth-child(5) {
      -webkit-animation-delay: 1.2s;
      -moz-animation-delay: 1.2s;
      animation-delay: 1.2s;
    }

    #app-loader .square:nth-child(6) {
      -webkit-animation-delay: 1.5s;
      -moz-animation-delay: 1.5s;
      animation-delay: 1.5s;
    }

    #app-loader .square:nth-child(8) {
      -webkit-animation-delay: 0.3s;
      -moz-animation-delay: 0.3s;
      animation-delay: 0.3s;
    }

    #app-loader .square:nth-child(9) {
      -webkit-animation-delay: 0.6s;
      -moz-animation-delay: 0.6s;
      animation-delay: 0.6s;
    }

    #app-loader .clear {
      clear: both;
    }

    #app-loader .last {
      margin-right: 0;
    }

    #app-loader .loader-content {
      color: #3498db;
      font-size: 16px;
      font-weight: 600;
    }
  </style>
</head>

<body>
  <noscript>
    <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled.
      Please enable it to continue.</strong>
  </noscript>
  <div id="app"></div>
  <!-- built files will be auto injected -->
  <div id="app-loader">
    <div class="square"></div>
    <div class="square"></div>
    <div class="square last"></div>
    <div class="square clear"></div>
    <div class="square"></div>
    <div class="square last"></div>
    <div class="square clear"></div>
    <div class="square "></div>
    <div class="square last"></div>
    <div class="loader-content">
      <span>Loading...</span>
    </div>
  </div>
  <!-- 使用CDN的JS文件 -->
  <% for (var i in htmlWebpackPlugin.options.cdn &&
  htmlWebpackPlugin.options.cdn.js) { %>
  <script src="<%= htmlWebpackPlugin.options.cdn.js[i] %>"></script>
  <% } %>
  <!-- 使用CDN的JS文件 -->
</body>
</html>